<template>
  <el-card class="sys-bulletin">
    <tag-content-header search add refresh setting @toolFun="toolFun" :settingData="columns">
      <template #title>
        <span class="title-text">公告列表</span>
      </template>
    </tag-content-header>
    <tag-table
      ref="table"
      :data="dataList"
      @refresh="getList"
      :loading="loading"
      :columns="columns"
      :params="params"
      :total="totalSize"
      :maxHeight="maxTableHeight"
    >
      <template #operation="{ scope }">
        <div class="operation-button-box">
          <el-tooltip effect="dark" content="切换状态" placement="top" :enterable="false">
            <el-switch
              active-color="#13ce66"
              v-model="scope.row.bulletinStatus"
              :active-value="1"
              :inactive-value="0"
              @change="toggleStatus(scope)"
            >
            </el-switch>
          </el-tooltip>
          <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
            <icon-svg name="iconEdit" class="svg-edit" @click.native="handleEdit('edit', scope.row)"></icon-svg>
          </el-tooltip>
          <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
            <icon-svg name="iconDelete" class="svg-delete" @click.native="handleDelete(scope.row)"></icon-svg>
          </el-tooltip>
        </div>
      </template>
    </tag-table>
    <bulletin-drawer ref="bulletinDrawer" @refresh="getList"></bulletin-drawer>
  </el-card>
</template>

<script>
import bulletinDrawer from './bulletin-edit-item'
export default {
  components: {
    bulletinDrawer
  },
  data() {
    return {
      dataList: [],
      loading: false,
      columns: [
        {
          show: true,
          label: '标题',
          prop: 'bulletinTitle',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: true,
          label: '内容',
          prop: 'bulletinContent',
          align: 'center'
        },
        {
          show: true,
          label: '备注',
          prop: 'bulletinRemark',
          align: 'center'
        },
        {
          show: false,
          label: '创建时间',
          prop: 'createTm',
          align: 'center'
        },
        {
          show: 'fixed',
          label: '操作',
          prop: 'operation',
          align: 'center',
          width: 200
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  computed: {
    maxTableHeight() {
      // 表格最大高度 =  可视窗口高度 - 顶栏高度50 - 内容容器padding - 页面容器padding和border - 工具栏最小高度 - 描述框高度
      var paddingHeight = 0
      if (this.$route.meta.isTab) {
        paddingHeight = 70
      } else {
        paddingHeight = 30
      }
      var height = this.$store.state.common.documentClientHeight - 50 - paddingHeight - 22 - 40
      return height
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysBulletinInfo/pageList'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.dataList = data.data.records
          this.totalSize = data.data.totalSize
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toolFun(operation) {
      switch (operation) {
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'add':
          // 新增动作
          this.handleEdit()
          break
        case 'refresh':
          // 刷新动作
          this.getList()
          break
      }
    },
    handleEdit(type = 'add', scope = {}) {
      let params = {
        type,
        bulletinId: scope.bulletinId
      }
      this.$refs.bulletinDrawer.showDrawer(params)
    },
    toggleStatus(scope) {
      let params = {
        bulletinId: scope.row.bulletinId,
        bulletinStatus: scope.row.bulletinStatus
      }
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysBulletinInfo/changeStatus'),
        method: 'put',
        data: this.$ajax.setData(params)
      }).then(({ data }) => {
        let mes = { type: '', message: '' }
        if (data && data.code === '0') {
          mes.type = 'success'
          mes.message = '操作成功'
        } else {
          mes.type = 'error'
          mes.message = data.data || data.msg
        }
        this.getList()
        this.$message({
          message: mes.message,
          type: mes.type,
          duration: 2000
        })
      })
    },
    handleDelete(scope) {
      if (!scope.bulletinId) return
      this.$confirm('确认删除【' + scope.bulletinTitle + '】？')
        .then(() => {
          let messageBox = document.getElementsByClassName('el-message-box__wrapper')
          messageBox[0].focus() // 防止按空格键重复确定
          this.$ajax({
            url: this.$ajax.setUrl('sys/sysBulletinInfo/' + scope.bulletinId),
            method: 'delete',
            params: this.$ajax.setParams()
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.getList()
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        })
        .catch(() => {
          return
        })
    }
  }
}
</script>

<style lang="scss">
.sys-bulletin {
  .tag-content-header {
    padding: 0 20px;
  }
}
</style>
